<template>
    <div id="container" style="width:100%;height:450px"></div>
</template>

<script>
import Highcharts from 'highcharts/highstock';
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';
import Highcharts3D from 'highcharts/highcharts-3d';

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts);
Highcharts3D(Highcharts);
export default {
    name: '',
    components: {},
    data() {
        return {
        }
    },
    created() { },
    mounted() {
        var chart = Highcharts.chart('container', {
            credits: {
                enabled: false, // 禁用版权信息
            },
            title: {
                text: '销售管理',
                align: "left",
                color: '#000'
            },
            // subtitle: {
            //     text: '数据来源：thesolarfoundation.com'
            // },
            yAxis: {
                title: {
                    text: '',
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
            series: [{
                name: '',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175],
                marker: {  //取消圆点
                    radius: 0,
                    lineWidth: 0,
                    lineColor: '##b689e3',
                    fillColor: '##b689e3',
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            }, {
                name: '',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434],
                marker: {
                    radius: 0,
                    lineWidth: 0,
                    lineColor: '##b689e3',
                    fillColor: '##b689e3',
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            }, {
                name: '',
                data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227],
                marker: {
                    radius: 0,
                    lineWidth: 0,
                    lineColor: '##b689e3',
                    fillColor: '##b689e3',
                    states: {
                        hover: {
                            enabled: false
                        }
                    }
                }
            },
            ],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    },
    methods: {}
}
</script>
<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}


#container {
    box-shadow: 0 0 10px 0 #ccc;
}
</style>
